<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" label-width="75px">
            <el-form-item label="部门代号" prop="deptCoding">
                <el-input v-model="queryParams.deptCoding" placehodler="请输入部门代号"
                          clearable size="small" @keyup.enter.native="handleQuery"
                ></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="queryParams.deptName" placehodler="请输入部门名称"
                          clearable size="small" @keyup.enter.native="handleQuery"
                ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="deptStatus">
                <el-select v-model="queryParams.deptStatus" placeholder="请选择状态" clearable size="small">
                    <el-option v-for="dict in deptCodingStatusOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.51">
                <el-button type="primary" icon="el-icon-plus" size="mini"
                        @click="handleAdd"
                >新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
                        @click="handleDelete"
                >删除</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="deptCodingList" v-loading="loading"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column label="序号" align="center" type="index"></el-table-column>
            <el-table-column label="部门代号" align="center" prop="deptCoding" :show-overflow-tooltip="true"></el-table-column>
<!--            <el-table-column label="部门英文" align="center" prop="deptCode" :show-overflow-tooltip="true"></el-table-column>-->
            <el-table-column label="部门名称" align="center" prop="deptName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="状态" align="center" width="80">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.deptStatus"
                            active-value="0" inactive-value="1"
                            @change="handleStatusChange(scope.row)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.creationDate) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-edit"
                               @click="handleUpdate(scope.row)"
                    >修改</el-button>
                    <el-button type="text" size="mini" icon="el-icon-delete"
                               @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="pageParams.page"
                :limit.sync="pageParams.rows"
                @pagination="getList"
        />
        <!--  dialog子组件  -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="365px" append-to-body>
            <dept-coding-dialog ref="deptCodingDialog" :deptList="deptList" @submitForm="getList" @cancelDialog="cancel"></dept-coding-dialog>
        </el-dialog>
    </div>
</template>

<script>
    import {getDeptCodingList, deleteDeptCoding, updateDeptCoding} from "@/api/question/deptCoding"
    import deptCodingDialog from "./form/deptCoding"
    import {getorganization} from "@/api/organization/organization";
    import { getAllDept } from '@/api/organization/dept'
    export default {
        name: "index",
        components: {
            deptCodingDialog
        },
        data() {
            return {
                loading: false,
                total: 0,
                showSearch: true,
                title: "",
                open: false,
                // 大部门集合
                deptList: [],
                //选中部门代号数组
                deptCodings: [],
                //选中部门代号id数组
                deptCodeIds: [],
                //非多个禁用
                multiple: true,
                // 分页参数
                pageParams: {
                    page: 1,
                    rows: 10,
                },
                //查询参数
                queryParams: {
                    deptCoding: undefined,
                    deptCode: undefined,
                    deptName: undefined,
                    deptStatus: undefined
                },
                //部门代号状态字典状态
                deptCodingStatusOptions: [],
                //部门代码表数据
                deptCodingList: [],

            }
        },
        created() {
            //初始化部门代号信息
            this.getList();
            this.getDicts("dept_coding_status").then(response => {
                this.deptCodingStatusOptions = response.responseBody.result;
            });
            //初始化大部门
            this.getAllDept()
        },
        methods: {
            //查询部门代号表
            getList() {
                this.loading = true;
                getDeptCodingList({
                    'pageParameter': this.pageParameter,
                    'searchParams': this.queryParams
                }).then(response => {
                    this.deptCodingList = response.responseBody.result;
                    this.total = response.responseBody.pageParameter.totalCount;
                    this.loading = false;
                });
            },
            // 查询所有大部门
            getAllDept() {
                getAllDept().then(res => {
                    this.deptList = res.responseBody;
                })
            },
            //重置dialog表单数据
            reset() {
                this.resetForm("form");
            },
            //查询按钮操作
            handleQuery() {
                this.pageParams.page = 1;
                this.getList();
            },
            //重置按钮操作
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            //新增
            handleAdd() {
                this.reset();
                this.title = "添加部门代号",
                    this.open = true;
            },
            //部门代号字典翻译
            deptCodingStatusFormat(row, col) {
                return this.selectDictLabel(this.deptCodingStatusOptions, row.deptStatus);
            },
            //修改
            handleUpdate(row) {
                this.reset();
                this.title = "修改部门代号";
                this.open = true;
                this.$nextTick(() => {
                    this.$refs.deptCodingDialog.init(row.deptCodeId, true);
                })
            },
            //删除
            handleDelete(row) {
                const deptCodings = row.deptCoding || this.deptCodings
                const deptCodeIds = row.deptCodeId || this.deptCodeIds
                this.$confirm("确认删除部门代号为：（" + deptCodings + "）的数据项", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.loading = true
                    deleteDeptCoding(deptCodeIds).then(response => {
                        this.getList();
                        this.msgSuccess("删除成功");
                    })
                }).catch(() => {
                }).finally(() => {
                    this.loading = false
                })
            },
            // 取消按钮
            cancel() {
                this.reset();
                this.open = false;
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.deptCodings = selection.map(item => item.deptCoding)
                this.deptCodeIds = selection.map(item => item.deptCodeId)
                this.multiple = !selection.length
            },
            // 状态修改
            handleStatusChange(row) {
                let text = row.deptStatus === "0" ? "启用" : "停用";
                this.$confirm('确认要"' + text + '""' + row.deptCoding + '"代号的部门吗?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return updateDeptCoding(row)
                }).then(() => {
                    this.msgSuccess(text + "成功");
                }).catch(function () {
                    row.deptStatus = row.deptStatus === "0" ? "1" : "0";
                });
            },
        }
    }
</script>
